<template>
  <div>
    <el-cascader
      v-model="officeName"
      :options="options"
      :props="props"
      placeholder="请选择部门"
      @clear="clearName"
      @change="officeDialogConfirm"
      clearable></el-cascader>
  </div>
</template>

<script>
  import OfficeDialog from '@/components/OfficeDialog'
  import { list as officeList } from '@/api/sysOffice'
  import utils from '@/utils/utils'
  export default{
    props: ["officeId"],
    data(){
      return{
        options:[],
         officeName: '',
        props:{
          value:'id',
          label:'name',
          children:'childrens',
          checkStrictly:true
        },
         query:{
           officeId:''
         }
      }
    },
    components: {
      OfficeDialog,
    },
    created() {
        if(!utils.isNull(this.officeId)){
          this.officeName=this.officeId
        }
      this.load()

    },
    methods:{
      // officeDialogShow() {
      //   this.$refs.officeDialog.show()
      // },
      load() {
        const _this = this
        const params = new URLSearchParams()
        officeList(params).then(response => {
          console.log(response)
          _this.options = response.data;
          console.log(_this.options);

        }).catch(error => {
        })
      },
      clearName(){
        this.query.officeId=''
      },
      officeDialogConfirm(val) {
        console.log(val)
        // this.officeName = val.name
        var _this = this
        if(!utils.isNull(val)){
          this.query.officeId = val[val.length-1]
        }else{
          this.query.officeId = ''
        }

        this.$emit('queryOfficeClick',this.query)
      },
    }
  }
</script>

<style>
</style>
